<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>自定义顶部城市分组</title>
    <!-- <link href="./common.css" rel="stylesheet" type="text/css" /> -->
    <style>

        .noti-tip{
        position:absolute;
        top:0;
        left:0;
        right:0;
        text-align:center;
        background:red;
        color:#fff;
        line-height:150%;
        }

    html,
    body {
        height: 100%;
    }
    
    #container {
        height: 50%;
        background: red;
    }
    
    #openBtn {
        margin: 10px;
    }
    </style>
</head>

<body>
   <!--  <div id="container">
    </div> -->
    <!-- <button id="openBtn">选择城市</button> -->
    <div><pre id="selectedCityInfo"></pre></div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key=8e3db2ff2ff33fe03f5b952ed07de5cd'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script src="../js/common.js"></script>
    <script type="text/javascript">
    //AMapUI.setDomLibrary(Zepto);

    AMapUI.loadUI(['misc/MobiCityPicker'], function(MobiCityPicker) {
        var cityPicker = new MobiCityPicker({
            topGroups: [{
                //组的唯一标识
                id: 'common_city',
                //标题
                title: '常用城市',
                //右侧锚点索引标题，建议单个字符
                anchorTitle: '常',
                //城市的adcodes列表(adcodes内容可以用MobiCityPicker.getCityData()获取)
                adcodes: [
                    "110000",
                    "310000",
                    "440300",
                    "440100",
                    "510100",
                    "330100",
                    "320500",
                    "500000",
                    "420100",
                    "610100",
                    "320100",
                    "120000"
                ]
            }, {
                //组的唯一标识
                id: 'common_city',
                //标题
                title: '推荐城市',
                //右侧锚点索引标题，建议单个字符
                anchorTitle: '荐',
                //城市的adcodes列表(adcodes内容可以用MobiCityPicker.getCityData()获取)
                adcodes: [
                    "110000",
                    "310000",
                    "120000"
                ]
            }]
        });

        cityPickerReady(cityPicker);



        cityPicker.show();


        //监听城市选中事件
        cityPicker.on('citySelected', function(cityInfo) {
          //隐藏城市列表
          cityPicker.hide();

          //选中的城市信息
          console.log(cityInfo);
        });
    });
    </script>
</body>

</html>
